/*

*鼠标拖拽与双击事件分离自定义右键菜单

elem  被拖拽的元素节点
shadow  菜单的元素节点
fn  双击时跳转的页面

*/

var dragNclick = (function (elem, shadow, fn) {

    drag();

    function drag() {
        var x = 0,
            y = 0,
            eWidth = parseInt(getStyles(elem, 'width')),  //元素的宽
            eHeight = parseInt(getStyles(elem, 'height')),  //元素的高
            sWidth = parseInt(getStyles(shadow, 'width')),  //菜单元素的宽
            sHeight = parseInt(getStyles(shadow, 'height')),  //菜单元素的高
            wWidth = getViewportSize().width,  //可视区的宽
            wHeight = getViewportSize().height,  //可视区的高
            bTime,  //鼠标点击时的时间
            eTime,   //鼠标抬起时的时间;  
            time,
            mcount = 0, //记录鼠标点击次数
            epose;//保存元素点击时的位置


        addEvent(elem, 'mousedown', function (e) {
            var e = e || window.event,
                btnCount = e.button;  //获取点击的次数

            if (btnCount === 0) {
                // 鼠标点下去时，鼠标距离图形边框的距离
                x = pagePos(e).X - parseInt(getStyles(elem, 'left'));
                y = pagePos(e).Y - parseInt(getStyles(elem, 'top'));

                shadow.style.display = 'none';
                epose = [pagePos(e).X - x, pagePos(e).Y - y];  //当鼠标点击下去时候图形在页面的位置
                bTime = new Date().getTime();

                addEvent(document, 'mousemove', mouseMove);
                addEvent(document, 'mouseup', mouseUp);
            } else if (btnCount === 2) {
                // btnCount === 2  是鼠标右键点击的意思
                shadow.style.display = 'block';
                shadowPos(e);
            }

            cancelBuble(e);   //取消冒泡行为
            preventDefaultEvent(e);  //阻止默认行为
        });

        // 对整个文档使用事件代理==>实现点击文档的其他地方菜单栏消失
        // 右键点击菜单栏打开后，点击菜单栏区域，菜单栏不消失
        // 思路：通过判断事件源是哪一个节点元素，从而决定菜单栏是否消失
        addEvent(document, 'mousedown', function (e) {
            var e = e || window.event,
                tar = e.target || e.srcElement,
                className = tar.className;

            if (className !== 'shadow') {
                shadow.style.display = 'none';
            }
        });

        addEvent(document, 'contextmenu', function (e) {
            var e = e || window.event;
            // 阻止鼠标右键默认菜单事件
            preventDefaultEvent(e);
        });

        function mouseMove(e) {
            var e = e || window.event,
                eleLeft = pagePos(e).X - x,
                eleTop = pagePos(e).Y - y;

            // 限定元素左右边界在文档内部
            if (eleLeft <= 0) {
                eleLeft = 0;
            } else if (eleLeft >= wWidth - eWidth) {
                // 千万不能忘记加px啊！！！！！小错误株心
                eleLeft = wWidth - eWidth - 1;
            }

            // 限定元素上下边界在文档内部
            if (eleTop <= 0) {
                eleTop = 0;
            } else if (eleTop >= wHeight - eHeight) {
                eleTop = wHeight - eHeight - 1;
            }

            elem.style.left = eleLeft + 'px';
            elem.style.top = eleTop + 'px';
        }

        function mouseUp(e) {
            var e = e || window.event;

            eTime = new Date().getTime();

            time = eTime - bTime;
            // 判断点击时长time的值，确定是否点击跳转
            if (time < 200) {
                mcount++; //记录点击次数
            }

            // 鼠标点击1次则开启定时器，记录第二次点击的时间，超时则清零鼠标点击次数
            if (mcount === 1) {
                var t = setInterval(function () {
                    mcount = 0;
                    clearInterval(t);
                }, 1000);
            }

            // 鼠标连续点击2次，则跳转页面
            if (mcount === 2) {
                fn();
                elem.style.left = epose[0] + 'px';  //跳转其他页面后返回原来点击的位置
                elem.style.top = epose[1] + 'px';
                mcount = 0;  //跳转到其他页面后清零
            }
            removeEvent(document, 'mousemove', mouseMove);  //解除事件绑定函数
            removeEvent(document, 'mouseup', mouseUp);
        }


        // 确定菜单元素在边界出现的位置
        function shadowPos(e) {
            if ((pagePos(e).X + sWidth) >= wWidth) {
                shadow.style.left = pagePos(e).X - sWidth + 'px';
            } else {
                shadow.style.left = pagePos(e).X + 'px';
            }

            if ((pagePos(e).Y + sHeight) >= wHeight) {
                shadow.style.top = pagePos(e).Y - sHeight + 'px';
            } else {
                shadow.style.top = pagePos(e).Y + 'px';
            }
        }
    }
});